// component/search-hd/search-detail/search-tetail.js
const F2 = require('../../../component/ui/f2-canvas/lib/f2')
const api = require('../../../wxapi/config.js')
Page({
	/**
     * 用户点击右上角分享
     */
	onShareAppMessage: function () {
		return {
			title: '影视行业大数据',
			path: '/pages/index/inedx/index',
		}
	},
	data: {
		stars: 0,
		poster: {
			mc: '-',
			pf: '-',
			lx: '-',
			bj: '-',
			dy: '-',
			zpr: '-',
			url: ''
		},
		haibaoimg: 'https://cdn.xtde.cn/wxapp/xtde/haibao.png',
		touxaing: 'https://cdn.xtde.cn/wxapp/xtde/touxiang.jpg',
		roleInfoList: [],
		historytableData: [],
		busiId: '',
		mc: '',
		themeOpts1: {
			lazyLoad: true
		},
		themeOpts2: {
			lazyLoad: true
		},
		themeItem1: {},
		themeItem2: {},
		hasthemeChartData: false,
		isthemeChartloading: false,
		ishistoryloading: false,
		isRoleInfoloading: false,
		skeleton: [1, 2, 3],
    isActive: [
      { isActived: false },
      { isActived: false },
      { isActived: false },
      { isActived: false },
    ]
	},
  toggleActive (e) {
    var _this = this
    let i = e.target.dataset.item
    let isActived = 'isActive[' + i + '].isActived';
    _this.setData({ [isActived]: !this.data.isActive[i].isActived });
  },
	onLoad: function (options) {
		this.setData({
			mc: options.name,
			busiId: options.id
		}) 
		this.getPoster(options.id)
		this.getRoleInfo(options.name, options.id)
	 
	},
	// 切换基础信息/制作公司/播出情况
	onChangeNav(event) {
		if (event.detail.index === 1) {
			if (this.data.historytableData.length === 0) {
				this.getHistory(this.data.mc, this.data.busiId)
				this.getThemeChart(this.data.mc, this.data.busiId)
			}
		}
	},
	// 获取指定剧名的影片海报信息
	getPoster (id) {
		this.setData({
			isRoleInfoloading: true
		})
		api.getPosterList({ busiId: id }).then((res) => {
			if (res.data.length !== 0) {
				this.setData({
					poster: res.data[0],
					stars: (parseFloat(res.data[0].pf) / 2).toFixed(1),
					isRoleInfoloading: false
				})
			} else {
				this.setData({
					isRoleInfoloading: false,
					poster: {
						mc: this.data.mc,
						pf: '-',
						lx: '-',
						bj: '-',
						dy: '-',
						zpr: '-',
						url: ''
					}
				})
			}
		})
	},
	// 获取角色信息
	getRoleInfo(mc, id) {
		this.setData({
			isRoleInfoloading: true
		})
		api.getActorList({ mc: mc, busiId: id }).then((res) => {
			if (res.data.length !== 0) {
				this.setData({
					roleInfoList: res.data
				})
			} else {
				this.setData({
					roleInfoList: []
				})
			}
		})
	},
	getHistory(mc, id) {
		this.setData({
			ishistoryloading: true
		})
		api.getHistoryResultList({ mc: mc, busiId: id }).then((res) => {
			if (res.data.length !== 0) {
				this.setData({
					historytableData: res.data,
					ishistoryloading: false
				})
			} else {
				this.setData({
					historytableData: [],
					ishistoryloading: false
				})
			}
		})
	},
	// 获取题材占比
	getThemeChart(mc, id) {
		this.setData({
			isthemeChartloading: true
		})
		api.getGenresRateList({ mc: mc, busiId: id }).then((res) => {
			this.setData({
				isthemeChartloading: false
			})
			if (res.data[0].plan.length !== 0 || res.data[0].release.length !== 0) {
				console.log(res.data[0])
				this.setData({
					hasthemeChartData: false
				})
				if (res.data[0].plan.length !== 0) {
					this.setData({
						themeItem1: {
							name: res.data[0].plan[0].lx,
							total: parseInt(res.data[0].plan[0].total) * 100 + '%'
						}
					})
					var data1 = []
					for (let i in res.data[0].plan) {
						data1.push({
							name: res.data[0].plan[i].lx,
							total: parseInt(res.data[0].plan[i].total)
						})
					}
					this.pieSelectChart('compertheme1', data1, 0)
				}
				if (res.data[0].release.length !== 0) {
					this.setData({
						themeItem2: {
							name: res.data[0].release[0].lx,
							total: parseInt(res.data[0].release[0].total) * 100 + '%'
						}
					})
					var data2 = []
					for (let i in res.data[0].release) {
						data2.push({
							name: res.data[0].release[i].lx,
							total: parseInt(res.data[0].release[i].total)
						})
					}
					this.pieSelectChart('compertheme2', data2, 0)
				}
			} else {
				this.setData({
					themeItem1: '',
					themeItem2: '',
					hasthemeChartData: true
				})
			}
		
		})
	},
  //环状图
	pieSelectChart(id, data, type) {
		this.chartComponent = this.selectComponent('#'+ id);
		this.chartComponent.init((canvas, width, height) => {
			var chart = new F2.Chart({
				el: canvas,
				width,
				height
			});
			chart.source(data, {
				percent: {
					formatter: function formatter(val) {
						return val * 100 + '%';
					}
				}
			});
			// chart.legend({
			// 	position: 'bottom',
			// 	align: 'center'
			// });
			chart.legend(false)
			chart.tooltip(false)
			chart.coord('polar', {
				transposed: true,
				radius: 0.95,
				innerRadius: 0.8
			});
			chart.axis(false)
			chart
				.interval()
				.position('a*total')
				.color('name')
				.adjust('stack')
				.style({
					lineWidth: 1,
					stroke: '#fff',
					lineJoin: 'round',
					lineCap: 'round'
				});

			chart.interaction('pie-select', {
				cancelable: false, // 不允许取消选中
				animate: {
					duration: 300,
					easing: 'backOut'
				},
				defaultSelected: {
					name: data[0].name,
					total: data[0].total * 100 + '%'
				},
				onEnd: (ev) => {
					const { shape, data, shapeInfo, selected } = ev;
					if (shape) {
						if (selected) {
							if (type === 0) {
								this.setData({
									themeItem1: {
										name: data.name,
										total: data.total * 100 + '%'
									}
								})
							}
							if (type === 1) {
								this.setData({
									themeItem2:{
										name: data.name,
										total: data.total * 100 + '%'
									}
								})
							}
							
						}
					}
				}
			});

			chart.render()
			return chart
		})
	}
})